<template>
  <div class="page-contianer">
    <h2>这是首页</h2>
    <p>我是首页的内容,123456.</p>
    <router-link to="/home/news">新闻</router-link>|
    <router-link to="/home/message">消息</router-link>
    <router-view />
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "Home",
  data() {
    return {
      path: "/home/news",
    };
  },
  //组件创建
  created() {
    console.log("Home组件被创建了");
    //组件渲染时，即组件创建时，改变路由
    // this.$router.push("/home/news");
  },
  // 组件销毁
  destoryed() {
    console.log("Home组件被销毁了");
  },
  //这两个函数只有保持的状态，即使用了keep-alive，才是有效的
  // 当前组件处于活跃状态调用
  activated() {
    console.log("调用actived");
    //活跃状态时，改变路由
    this.$router.push(this.path).catch((err) => err);
  },
  // 当前组件处于非活跃状态调用
  // deactivated(){
  //   console.log('调用actived')
  //   console.log(this.$route.path)
  //   this.path = this.$route.path
  // },
  //路由加载之后
  beforeRouteLeave(to, from, next) {
    console.log(this.$route.path);
    this.path = this.$route.path;
    next();
  },
};
</script>

<style scoped>
</style>
